import React, { Component } from 'react';
class Header extends Component {
    constructor(props) {
        super(props)
        this.changeInput = this.changeInput.bind(this)
        this.addList = this.addList.bind(this)
    }

    render() {
        return (
            <>
                <label htmlFor="serve">增加服务：</label>
                <input id="serve"
                    value={this.props.val}
                    onChange={this.changeInput}
                    type="text"

                    // 使用ref更加语义化,changeInput中不用再写target.value,改写input.value
                    ref={(input) => { this.input = input }}
                />
                <button onClick={this.addList}>增加服务</button>
            </>
        );
    }

    changeInput() {
        // console.log(e.target.value);
        this.props.inputChange(this.input.value)
    }

    addList() {
        this.props.addChange()
    }
}

export default Header;